<template>
  <a-select :value="selectedValue" :allow-clear="allowClear" :show-search="showSearch" option-filter-prop="children"
    :filterOption="$commonFun.filterOption" :disabled="disabled" @change="handleChange" :placeholder="placeholder"
    :maxTagCount="maxTagCount" :getPopupContainer="getPopupContainer" :mode="mode" :loading="loading">
    <a-select-option v-for="item in options" :title="item[replaceFields.title]" :key="item[replaceFields.key]"
      :value="item[replaceFields.value]" :disabled="disabledOptions.indexOf(item[replaceFields.value]) !== -1">
      {{ item[replaceFields.title] }}
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 下拉选项列表
    options: {
      type: Array,
      default() {
        return []
      }
    },
    // 设置默认值
    defaultValue: {
      type: [String, Number, Object, Array, Boolean, undefined],
      default() {
        return undefined
      }
    },
    // 要替换取每个项的属性对应的key
    replaceFields: {
      type: Object,
      default() {
        return {
          key: 'id',
          value: 'id',
          title: 'name'
        }
      }
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'default'
    },
    // 禁用下拉配置
    disabledOptions: {
      type: Array,
      default() {
        return []
      }
    },
    placeholder: {
      type: String,
      default: ''
    },
    maxTagCount: {
      type: Number,
      default: 10
    },
    getPopupContainer: {
      type: Function,
      default(triggerNode) {
        return triggerNode.parentNode
      }
    }
  },
  data() {
    return {
      selectedValue: null
    }
  },
  watch: {
    defaultValue: {
      handler(val) {
        if (val !== this.selectedValue) {
          this.selectedValue = this.defaultValue
        }
      },
      immediate: true
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('changeoption', value)
    }
  }
}
</script>
